<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: '销量',
      /**
       * 图表类型
       */
      type: 'bar',
    },
  ],
}

let clearInterval
let i = 0
const data1 = [120, 200, 150, 80, 70, 110, 130]
const data2 = [220, 100, 250, 180, 30, 210, 30]
onMounted(() => {
  chartViewRef.value.setOption(option)
  clearInterval = window.setInterval(() => {
    i++
    let d = data1
    if (i % 2 === 0) {
      d = data2
    }
    chartViewRef.value.setOption({
      series: [
        {
          /**
           * 根据name更新系列数据
           */
          name: '销量',
          /**
           * 图表数据
           */
          data: d,
        },
      ],
    })
  }, 3000)
})

onBeforeUnmount(() => {
  if (clearInterval) {
    window.clearInterval(clearInterval)
  }
})
</script>
